<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        /* 第一种 定位 */
        .parent1 {
                border: 2px solid #333;
                width: 100px;
                height: 100px;
                position: relative;
                
              }
        .test1 {
              width: 40px;
              height: 40px;
              background-color: pink;
              position: absolute;
              top: 29px;
              left: 29px; 
         }



         /* 第2种 外边距 */
         .d2 {
                border: 2px solid #333;
                width: 100px;
                height: 100px;
               
              }
        .d22 {
              width: 40px;
              height: 40px;
              background-color: rgb(186, 5, 35);
              margin: 0 auto;
              margin-top: 29px;

         }




         /* 第3种  弹性盒*/
         .d3 {
                border: 2px solid #333;
                width: 100px;
                height: 71px;
                display: flex;
              flex-direction: row;
              justify-content: center;
               padding-top: 29px;
              }
        .d33 {
              width: 40px;
              height: 40px;
              background-color: rgb(0, 0, 0);
              display: block;
         }




              /* 第4种 */
              .d4 {
                border: 2px solid #333;
                width: 100px;
                height: 100px;
                margin: auto 0;
              }
        .d44{
              width: 40px;
              height: 40px;
              background-color: rgba(0, 128, 255, 0.735);              
         }




              /* 第5种 */
              .d5 {
                border: 2px solid #333;
                width: 100px;
                height: 100px;
                margin: auto 0;
              }
        .d55{
              width: 40px;
              height: 40px;
              background-color: rgba(255, 2, 120, 0.735);              
         }
        </style>



<!-- 第一种 -->
        <div class="parent1"  >
          <div class="test1"  ></div>
        </div>

<!-- 第二种 -->
        <div class="d2" >
            <div class="d22" ></div>
        </div>
<!-- 第3种 -->
        <div class="d3" >
            <div class="d33" ></div>
        </div>
<!-- 第4种 -->
        <div class="d4" >
            <div class="d44" ></div>
        </div>
<!-- 第5种 -->
        <div class="d5" >
            <div class="d55" ></div>
        </div>


        
    
</body>
</html>
